/* 
出现useReducer 原因是 多个页面 可能使用同一个状态

多个页面 抽离出一个单独的公共状态出来  可以供页面改变  实现状态共享

*/



import { useReducer } from "react";
// 1. 创建初始化状态
let defaultState = {
    num: 0,
    age: 18,
    list: [1, 2, 3, 4, 5],
    user: {
        name: "张三"
    }
}
// 参数一初始状态 参数二 提交的数据对象
let reducer = (state, action) => {
    // console.log(state)
    // console.log(action)
    // let newState ={...state};
    // newState.num ++;
    // return newState
    switch (action.type) {
        case "add":
            let newState = { ...state };
            newState.num++;
            return newState;
        case 'addage':
            let ageState = { ...state };
            ageState.age++;
            return ageState;
        default:
            return state;
    }
}
function Home() {
    //创建reducer   参数一 reducer函数     参数二 初始化状态
    // state  表示 共享状态 dispatch 则为改变状态唯一方法
    let [state, disPatch] = useReducer(reducer, defaultState)
    return (
        <div>
            <h1>useReducer - hooks - {state.age} -- {state.num}</h1>
            <button onClick={() => {
                disPatch({
                    type: "addage"
                })
            }}>++</button>
            <Child></Child>
        </div>
    )
}

function Child() {
    let [state, disPatch] = useReducer(reducer, defaultState)
    return (
        <div>
            child --- {state.num}
        </div>
    )
}

export default Home;


/* 
1. 创建初始化状态
2. 创建reducer执行函数  计算函数
3. 创建reducer  参数一 执行函数  参数二 初始化状态 
  把初始化状态state 和 提交函数disPatch 解构出来

4. 如何改变状态： 通过调用提交函数（disPatch）  然后传参数  通过type类型  判断switch状态对应的业务逻辑处理 返回新的状态

5. 返回新状态 就会更新改变





useReducer 就是一种不使用usestate的状态控制的方式
区别： useState每次只能更新管理一条数据
*/